<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <h4>js部分</h4>
    <input type="button" value="printJSArgs" onclick="printJSArgs(msg,'字符串',1234,false,[1,2,3],{a:1})">
    <br>
    <input type="button" value="printJSArgs" onclick="printJSArgs(msg+'.end',1+1,`msg取值:${msg}`,false?'是':'否')">
    <br>
    <input type="button" value="printJSArgs" onclick="printJSArgs(Math.PI)">
    <br>
    <!-- html事件绑定时，页面定义的this关键字为当前事件对应的DOM对象 -->
    <input type="button" value="printJSArgs" onclick="printJSArgs(this)">
    <br>
    <input type="text" oninput="printJSArgs(this.value)">
    <br>
    <input type="text" oninput="printJSArgs(event,event.target.value)">
    <script>
        let msg = "js全局环境下msg变量"
        function printJSArgs(...args){
            console.log("js-传入的参数:",args)
        }
    </script>
    <hr>
    <h4>vue部分</h4>
    
    <div id="app">
        <pre v-pre class="note">
        v-on指令的事件回调参数
            + 变量参数
            + 匿名参数
            + 表达式执行参数
            + JS内置对象参数
            + 页面this参数
            + 事件特殊参数[事件源对象] => vue将关键字 event 改变为 $event 用于和仓库变量区分
        </pre>
        <p>演示参数</p>
        <input type="button" value="printArgs" @click="printArgs(1,2,3,4,5)"> <br>
        <p>仓库变量参数【配合循环指令v-for使用】</p>
        <input type="button" value="printArgs" @click="printArgs(msg)">
        <p>匿名参数</p>
        <input type="button" value="printArgs" @click="printArgs('字符串',1234,false,[1,2,3],{a:1})">
        <p>表达式执行参数</p>
        <input type="button" value="printArgs" @click="printArgs(msg+'.end',1+1,`msg取值:${msg}`,false?'是':'否')">
        <p>JS内置对象参数【注意事项等效插值表达式】</p>
        <input type="button" value="printArgs" @click="printArgs(Math.PI)">
        <p>页面this参数 <br>
            【vue3.0 容器中通过v-on绑定的事件回调的页面this参数为当前对应的vue实例】<br>
            【vue2.0 容器中通过v-on绑定的事件回调的页面this参数为window】
        </p>
        <input type="button" value="printArgs" @click="printArgs(this)"> <br>
        <input type="text" @input="printArgs($event,$event.target.value)">

    </div>
    <script type="module">
        // vue3
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    msg:"vue数据参数的变量msg",
                    // Math:{
                    //     PI:111
                    // }
                }
            },
            methods:{
                // ... 用于方法参数叫做剩余参数
                //     将方法执行时未定义形参变量名的剩余参数以数组的方式进行存储
                printArgs(...args){
                    console.log("vue-传入的参数:",args)
                }
            }
        }).mount("#app");
    
    </script>

        <!-- <script type="module">
            // vue2
            import Vue from "../assets/vue2/vue.esm.browser.js";
            new Vue({
                el:"#app", // 等同于vue3的 mount 方法
                data(){
                    return {
                        msg:"vue数据参数的变量msg",
                        // Math:{
                        //     PI:111
                        // }
                    }
                },
                methods:{
                    // ... 用于方法参数叫做剩余参数
                    //     将方法执行时未定义形参变量名的剩余参数以数组的方式进行存储
                    printArgs(...args){
                        console.log("vue-传入的参数:",args)
                    }
                }
            })
    </script> -->
</body>
</html>